<template>
  <div>
    <my-header></my-header>
    <div class="container">
      <div class="top-img">
        <img src="/img/index/nav/lunbo3.webp" alt="" />
      </div>
      <div class="new-text">
        <span>最新上架</span>
      </div>
      <el-divider></el-divider>
      <div class="new-book">
        <div class="text" v-for="(item,index) in num" :key="index">
          <router-link :to="`/detail/${item.id}`">
          <div class="box">
            <div class="book-img">
              <img :src="item.img_small" alt="" />
            </div>
            <div class="book-text">
              <div>
                <span
                  >{{item.title}}
                </span>
              </div>
              <div class="book-number">
                <span>¥{{item.price}}</span>
                <span>¥{{item.oldprice}}</span>
              </div>
            </div>
          </div>
          </router-link>
        </div>
        
      </div>
      <el-pagination layout="prev, pager, next" :total="2" 
      :page-size="pagesize"
      @current-change="currentPage"
      :current-page="page"
      style="margin-top:30px"> </el-pagination>
    </div>
    <my-footer style="margin-top: 50px"></my-footer>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeName: "1",
      pagesize:1,
      page:1,
      num:[]
    };
  },
  mounted(){
    this.axios.get(`/booknew?page=1`).then(result=>{
        console.log(result.data)
        this.num=result.data
      })
  },
  methods:{
    currentPage(page){
      this.axios.get(`/booknew?page=${page}`).then(result=>{
        console.log(result.data)
        this.num=result.data
      })
    }
  }
};
</script>
<style scoped>
.container {
  max-width: 1200px;
  min-width: 1200px;
  margin: 0 auto;
  margin-top: 30px;
}
.container .top-img {
  width: 1200px;
}
.container .top-img > img {
  width: 100%;
}
.container .new-text {
  height: 50px;
  text-align: left;
  line-height: 50px;
  font-size: 24px;
  margin-top: 30px;
  font-weight: bold;
}
.container .new-book {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 30px;
}
.container .book-img {
  width: 220px;
  height: 225px;
  margin: auto;
}
.container .book-img img {
  width: 100%;
}
.container .text {
  margin-top: 20px;
}
.container .box {
  box-shadow: 0 0 3px;
  height: 285px;
  margin: 3px 3px 0 3px;
  border-radius: 5px;
}
.container .book-text > div {
  width: 280px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #9b9b9b;
}
.container .book-number > span:nth-child(1) {
  color: #fd3f31;
  font-size: 25px;
  font-weight: bold;
  margin: 10px;
}
.container .book-number > span:nth-child(2) {
  text-decoration: line-through;
}
.container .box:hover {
  box-shadow: 0 0 0 3px #f08078;
}
</style>